<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="我的水卡" left-arrow fixed @click-left="onClickLeft" @click-right="onClickRight">
            <template #right>
                <van-icon name="scan" color="#000" size="16" style="margin-right: .04rem;" />扫码充值
            </template>
        </van-nav-bar>
        <div class="profit_core">
            <div class="profit_core_amt">
                <div class="profit_core_amt_list after">
                    <div>{{ amountList.total_count }}</div>
                    <div>当前已激活水卡</div>
                </div>
                <div class="profit_core_amt_list after">
                    <div>{{ amountList.total_water_num }}</div>
                    <div>已激活水卡余额</div>
                </div>
            </div>
        </div>
        <div>
            <div class="profit_core_title1">*水卡首次充值时，自动激活并绑定店铺，每次充值水卡，使用右上角的扫码进行充值即可</div>
            <div class="profit_core_title">水卡列表</div>
            <div>
                <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div style="width: 95%;margin: 0 auto;margin-top: .2rem;">
                        <div class="order_all" v-for="item, index in shopList" :key="index" :title="item">
                            <div class="order_name_return">
                                <div class="order_name_left">{{ item.card_no }}</div>
                                <div class="balance_status" :class="statusClass(item.status)">{{
                                    item.status == 1 ? '使用中' : item.status == 2 ? '未注册' : item.status == 3 ? '已挂失' :item.status == 4 ? '已注销': '-'
                                }}</div>
                            </div>
                            <div class="order_name_return" style="margin-top: 0.1rem;">
                                <div class="order_name_time">{{ item.create_time }}</div>
                                <div class="balance_amt">{{ item.water_num }}</div>
                            </div>
                        </div>
                    </div>

                </van-list>
            </div>
        </div>
        <van-popup v-model="show" :style="{ width: '90%' }" round :close-on-click-overlay="false">
            <!--  @click-close-icon="handleClose" closeable -->
            <div class="shop_settle_popup">
                <div class="shop_settle_popup_title">水卡充值</div>
                <div class="shop_settle_popup_content">
                    <div>水卡编号</div>
                    <input type="text" placeholder="水卡编号" v-model="code">
                </div>
                <div class="shop_settle_popup_content">
                    <div>充值数量</div>
                    <input type="text" v-model="num" placeholder="请输入水袋充值数量(整数)">
                </div>
                <div class="shop_settle_popup_tip">当前水袋余额:{{ amountList.water_num }}袋</div>
                <div class="btns">
                    <div @click="handleClose">取消</div>
                    <div @click="handleSubmit">充值</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { SHOP_DATA, SHOP_LIST, SHOP_RANGE, AGENT_REGION_LIST } from '@/api/mine'
export default {
    data() {
        return {
            finished: false,
            loading: false,
            page: 1,
            pageSize: 20,
            shopList: [],
            amountList: {},
            show: false,
            code: "",
            num: "",
            id: this.$route.query.id
        }
    },
    mounted() {
        window.scrollTo(0, 0)
        this.shopDataList()
        //
        if (this.$route.query.code) {
            this.show = true
            this.code = this.$route.query.code
        }
    },
    methods: {
        shopDataList() {
            let params = {}
            params['key'] = this.big_cascaderValue;
            params['region_code'] = this.cascaderValue;
            this.$http.get(`/store/manage/${this.id}/water_card_data`, { params: params }).then(res => {
                this.amountList = res.data
            })

        },
        statusClass(status) {
            switch (status) {
                case 1:
                    return 'status-in-use'; // 使用中
                case 2:
                    return 'status-not-registered'; // 未注册
                case 3:
                    return 'status-lost'; // 已挂失
                default:
                    return 'status-default'; // 其他情况
            }
        },
        onClickRight() {
            // console.log('扫码');
            this.$router.push({ path: '/waterScan', query: { id: this.$route.query.id } })
        },
        handleClose() {
            this.show = false
            this.$router.replace({ path: '/waterCard', query: { id: this.$route.query.id } })
        },
        resetInit() { //重置
            this.page = 1;
            this.shopList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        onClickLeft() {
            this.$router.back()
        },
        handleSubmit() {
            if (this.code == "") return this.$toast("请输入水卡编号")
            if (this.num == "") return this.$toast("请输入水袋充值数量")
            let params = {}
            params['card_no'] = this.code
            params['quantity'] = this.num
            this.$http.post(`/store/manage/${this.id}/water_card_recharge`, params).then(res => {
                this.$toast("充值成功")
                this.show = false
                this.$router.replace({ path: '/waterCard', query: { id: this.$route.query.id } })
                // this.resetInit()
            })

        },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            this.$http.get(`/store/manage/${this.id}/water_card_list`, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;
                    if (list && list.length) {
                        this.page++;
                        this.shopList = this.shopList.concat(list);

                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
    },
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    min-height: calc(100vh - 46px);
    padding-top: 46px;
    background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.profit_core_title {
    width: 95%;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: .28rem;
    color: #333;
    // line-height: 18px;
    text-align: left;
    font-style: normal;
    padding-top: .32rem;
}

.profit_core_title1 {
    width: 95%;
    margin: 0 auto;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: .24rem;
    color: #F9301B;
    // line-height: 18px;
    text-align: left;
    font-style: normal;
    padding-top: .32rem;
}

.profit_core {
    width: 95%;
    margin: 0 auto;
    margin-top: 0.2rem;
    box-sizing: border-box;
    padding-bottom: .34rem;
    border-radius: 0.2rem;
    // border: 0.01rem solid #999;
    background: url("../../../images/mine/img_beij2.png") no-repeat;
    background-position: center;
    background-size: cover;
    color: #fff;
    padding-top: .34rem;

    .profit_core_amt {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .after {
            position: relative;

            // &::after {
            //     position: absolute;
            //     right: 0;
            //     top: 0;
            //     bottom: 0;
            //     margin: auto;
            //     content: '';
            //     height: 0.5rem;
            //     width: 1px;
            //     background: rgba(255, 255, 255, 0.2);
            // }
        }

        .profit_core_amt_list {
            width: 50%;
            text-align: center;
            margin-bottom: 0.2rem;
            line-height: 0.6rem;
            font-size: 0.28rem;
            font-size: 400;

            div:first-child {
                font-size: .32rem;
                font-weight: 500;
            }
        }
    }

}

.order_all {
    width: 100%;
    margin: 0 auto;
    margin-top: 0.2rem;
    // border: 0.01rem solid #999;
    border-radius: 0.16rem;
    background: #fff;
    padding-bottom: .32rem;
    padding: .22rem 0.32rem;
    box-sizing: border-box;
    // border-bottom: .01rem solid #ccc;
    position: relative;

    .order_name_return {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        // padding: 0.28rem 0;
        padding-bottom: 0;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        .order_name_left {
            width: 48%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 400;
            color: #333;
        }

        .balance_status {
            padding: .04rem .16rem;
            background: #EBEBEB;
            color: #666666;
            font-weight: 400;
            font-size: .24rem;
            border-radius: 0px 6px 0px 6px;
            position: absolute;
            right: 0;
            top: 0;
        }
        .status-in-use{
            background: #EBFFDD;
            color: #00AA47;
        }
        .status-not-registered{
            background: #EBEBEB;
            color: #666666;
        }
        .status-lost{
            background: #FFE3D1;
            color: #FF6200;
        }
        .status-default{
            background: #EBEBEB;
            color: #666666;
        }

        .balance_amt {
            // margin-top: 0.3rem;
            // font-weight: bold;
            width: 48%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: right;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: .36rem;
            color: #1D69E4;
            position: absolute;
            right: 20%;
            top: 50%;
            transform: translateY(-50%);
        }

        .order_name_time {
            color: #999;
            font-size: .24rem;

        }

        // &_right {
        //     font-size: 0.25rem;
        // }
    }
}

.shop_settle_popup {
    padding: .32rem;

    .shop_settle_popup_title {
        text-align: center;
        font-size: .32rem;
        font-weight: 500;
        margin-bottom: .3rem;
        color: #333;
    }

    .shop_settle_popup_content {
        font-size: .28rem;
        margin-bottom: .32rem;
        color: #333;
        font-weight: 500;

        input {
            font-weight: 400;
            width: 100%;
            border: none;
            border-bottom: 1px solid #ccc !important;
            margin-top: .2rem;
            padding-bottom: .2rem;
            font-size: .28rem;
        }
    }

    .shop_settle_popup_tip {
        font-size: .24rem;
        color: #1D69E4;
    }

    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .52rem;

        div {
            width: 45%;
            background: #FFFFFF;
            border-radius: .6rem;
            border: 1px solid #E3E3E3;
            text-align: center;
            font-weight: 400;
            font-size: .32rem;
            padding: .16rem 0;
            color: #333333;

        }

        div:last-child {
            background: linear-gradient(90deg, #4A89EC 0%, #1261E2 100%);
            border-radius: .6rem;
            color: #FFFFFF;
        }
    }
}
</style>
